<template>
  <view class="userinfo-container">
    <view class="avatar-wrap">
      <image :src="user.avatar" class="avatar" mode="aspectFill" />
    </view>
    <view class="info-list">
      <view class="info-item"><text class="label">用户名：</text>{{ userList.username }}</view>
      <view class="info-item"><text class="label">真实姓名：</text>{{ userList.realName }}</view>
      <view class="info-item"><text class="label">性别：</text>{{ genderText }}</view>
      <view class="info-item"><text class="label">手机号：</text>{{ userList.phone }}</view>
      <view class="info-item"><text class="label">邮箱：</text>{{ userList.email }}</view>
      <view class="info-item"><text class="label">用户ID：</text>{{ userList.userId }}</view>
      <view class="info-item"><text class="label">密码：</text>{{ userList.password }}</view>
    </view>
    <view class="logout-btn">
      <button @click="goToEditInfo">修改信息</button>
      <button @click="logout">退出登录</button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'; 
import { onShow } from '@dcloudio/uni-app'; // 从uni-app导入onShow

// 定义响应式变量
const userList = ref([]);
const user = ref({});

// 在页面显示时触发数据刷新
onShow(() => {
  // 从本地存储重新获取用户信息
  const storedUserList = uni.getStorageSync('userList') || [];
  userList.value = storedUserList;
  user.value = storedUserList[0] || {};
});

const genderText = computed(() => {
  if (user.value.gender === 1) return '男';
  if (user.value.gender === 2) return '女';
  return '未知';
});

const goToEditInfo = () => {
  uni.navigateTo({ url: '/pages/editinfo/editinfo' });
}; 

const logout = () => {
  uni.setStorageSync('userList', []);
  uni.navigateTo({ url: '/pages/login/login' });
};
</script>

<style lang="scss" scoped>
.userinfo-container {
  min-height: 100vh;
  background: #f7f7f7;
  padding: 40rpx 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.avatar-wrap {
  margin-bottom: 30rpx;
}
.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background: #eee;
  object-fit: cover;
  border: 2rpx solid #ddd;
}
.info-list {
  width: 100%;
  max-width: 500rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  padding: 30rpx 20rpx;
  display: flex;
  flex-direction: column;
  gap: 18rpx;
}
.info-item {
  font-size: 28rpx;
  color: #333;
  display: flex;
  align-items: center;
}
.label {
  color: #888;
  margin-right: 12rpx;
  min-width: 120rpx;
  display: inline-block;
}
// 退出按钮样式
.logout-btn {
  margin-top: 40rpx;
  width: 100%;
  max-width: 500rpx;
  text-align: center;
}
.logout-btn button {
  width: 100%;
  height: 80rpx;
  background-color: #ff4d4f;
  color: white;
  border-radius: 16rpx;
  font-size: 32rpx;
  border: none;
  margin-bottom: 20rpx; // 添加按钮间距
}

</style>